<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <!-- 添加css的外部链接 -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Baidu</title>
</head>
<body>
    <!-- 一：顶部标签 -->
    <div class="A">
        <a href="https://news.baidu.com/" blank="_blank" class="B">新闻</a>
        <a href="https://www.hao123.com/?src=from_pc" blank="_blank" class="B">hao123</a>
        <a href="https://map.baidu.com/" blank="_blank" class="B">地图</a>
        <a href="https://tieba.baidu.com/index.html" blank="_blank" class="B">贴吧</a>
        <a href="https://haokan.baidu.com/?sfrom=baidu-top" blank="_blank" class="B">视频</a>
        <a href="https://image.baidu.com/" blank="_blank" class="B">图片</a>
        <a href="https://pan.baidu.com/disk/main?from=1026962h#/index?category=all" blank="_blank" class="B">网盘</a>
        <a href="https://www.baidu.com/more/" blank="_blank" class="B">更多</a>
        <!-- 要注意这里显示的是有下划线、字体变蓝的链接形式文字，后续需要改进为正常文字但是带有链接 -->
    </div>
    <div class="C">
        <a href="https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5" class="c3" target="_blank">北京</a>
        <a class="c1">设置</a>
        <a class="c2">登录</a>
        <!-- C与A还未在同一行，后续需要让这两个到一行当中 -->
    </div>
    <div class="D">
        <a><img class="e5" src="img\OIP-C.jpg" width="62px" height="31px"></a>
        <!-- 给图片定义一个“百度热搜”的超链接 -->
        <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs">
            <!-- 加上一个百度的图片 -->
            <img class="d3" src="img\Snipaste_2023-03-19_20-46-15.png" width="300" height="100">
            <!-- src是图片路径 -->
            <!-- 此时还只是网页图片。无法在主页面显示 -->
        </a>
        <!-- 做一个搜索栏表单 -->
        <form class="e">
            <!-- 用一个盒子装表单，另一个盒子装“百度一下”的按钮 -->
            <!-- 一个是文本一个是按钮 -->
            <span class="e1">
                <input class="e3" type="text">
            </span>
            <span class="e2">
                <!-- 利用value来固定这个值 -->
                <input class="e4" type="submit" value="百度一下">
                <!-- 这个value后面应该用不到 -->
            </span>
        </form>
    </div>
    <div class="h">
        <div class="h1">
            <a class="h2" href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank">
                <div>
                    <span class="h4"></span>
                    <span class="h5"></span>
                </div>
            </a>
            <a href="#" class="h6">
                <span class="h7"></span>
                <span class="h8">换一换</span>
            </a>
        </div>

        <!-- 后面这个非常大的盒子装的就是各种附上链接的热搜 -->
        <!-- 注意这里使用的都是无序标签 -->
        <ul class="i">

            <!-- 第一个盒子 -->
            <li class="i1">
                <a class="i2" href="https://www.baidu.com/s?wd=%E6%B0%91%E7%94%9F%E7%AD%94%E5%8D%B7%EF%BC%81%E6%8D%A2%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%B8%A6%E4%BD%A0%E7%9C%8B&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                    <i class="i3"></i>
                    <span class="i4">民生答卷！换种方式带你看</span>
                </a>
            </li>
            <!-- 第二个盒子 -->
            <li class="i5">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=%E5%86%99%E7%BB%99%E6%96%B0%E5%BE%81%E7%A8%8B%E4%B8%8A%E6%98%A5%E5%A4%A9%E7%9A%84%E4%B8%AD%E5%9B%BD&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                    <span class="n no3">3</span>
                    <span class="i4">写给新征程上春天的中国</span>
                </a>
                <span class="i9">热</span>
            </li>
            <!-- 第三个盒子 -->
            <li class="i1">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=%E5%A4%9A%E5%AE%B6%E5%8C%BB%E9%99%A2%E5%8C%BB%E7%94%9F%3A%E6%9C%AC%E8%BD%AE%E7%94%B2%E6%B5%81%E9%AB%98%E5%B3%B0%E5%9F%BA%E6%9C%AC%E8%BF%87%E5%8E%BB&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                    <span class="n no1">1</span>
                    <span class="i4">多家医院医生:本轮甲流高峰基本过去</span>
                </a>
            </li>
            <!-- 第四个盒子 -->
            <li class="i5">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=%E5%A5%B3%E5%B9%B2%E9%83%A8%E4%B8%BA%E9%80%83%E9%81%BF%E5%AE%A1%E6%9F%A5%E6%8F%90%E4%BE%9B%E5%81%87%E8%AF%81%E6%98%8E%E8%AF%88%E7%97%85&tn=baidutop10&rsv_idx=2&usm=1&ie=utf-8&rsv_pq=c2f4b9c700012dfa&oq=%E5%A4%9A%E5%AE%B6%E5%8C%BB%E9%99%A2%E5%8C%BB%E7%94%9F%3A%E6%9C%AC%E8%BD%AE%E7%94%B2%E6%B5%81%E9%AB%98%E5%B3%B0%E5%9F%BA%E6%9C%AC%E8%BF%87%E5%8E%BB&rsv_t=a233ii%2B0%2FLvWy3HrWUT6n6g%2F37F%2Fy301XxFmGKrzaWL%2FW40gzedXymE62HAzTW8XFw&rqid=c2f4b9c700012dfa&rsf=557313ae8e3179b2449088397e379907_1_15_5&rsv_dl=0_right_fyb_pchot_20811&sa=0_right_fyb_pchot_20811" target="_blank">
                    <span class="n no4">4</span>
                    <span class="i4">女干部为逃避审查提供假证明诈病</span>
                </a>
                <span class="i9">热</span>
            </li>
            <!-- 第五个盒子 -->
            <li class="i1">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=%E4%B8%AD%E5%A4%AE%E7%BB%9F%E6%88%98%E9%83%A8%EF%BC%9A%E8%A6%81%E4%BB%A5%E5%B4%94%E8%8C%82%E8%99%8E%E4%B8%BA%E5%8F%8D%E9%9D%A2%E6%95%99%E6%9D%90&tn=baidutop10&rsv_idx=2&usm=1&ie=utf-8&rsv_pq=990ccdab003375bb&oq=%E5%A5%B3%E5%B9%B2%E9%83%A8%E4%B8%BA%E9%80%83%E9%81%BF%E5%AE%A1%E6%9F%A5%E6%8F%90%E4%BE%9B%E5%81%87%E8%AF%81%E6%98%8E%E8%AF%88%E7%97%85&rsv_t=58adGbeKcGPjNblGuxU%2BXE7FetGAO4kuBblGJJrF9m3g608xappSYI99T3tCxGJawA&rqid=990ccdab003375bb&rsf=557313ae8e3179b2449088397e379907_1_15_3&rsv_dl=0_right_fyb_pchot_20811&sa=0_right_fyb_pchot_20811" target="_blank">
                    <span class="n no2">2</span>
                    <span class="i4">中央统战部:要以崔茂虎为反面教材</span>
                </a>
                <span class="i9">热</span>
            </li>
            <!-- 第六个盒子 -->
            <li class="i5">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=%E7%BE%8E%E5%9B%BD%E8%BF%91200%E5%AE%B6%E9%93%B6%E8%A1%8C%E5%AD%98%E2%80%9C%E7%88%86%E9%9B%B7%E2%80%9D%E9%A3%8E%E9%99%A9&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                    <span class="n no4">5</span>
                    <span class="i4">美国近200家银行存“爆雷”风险</span>
                </a>
                
            </li>

        </ul>
    </div>
    <div class="F">
        <a href="https://home.baidu.com/" target="_blank" class="f1"> 关于百度</a>
        <a href="https://ir.baidu.com/" target="_blank" class="f1">About Baidu</a>
        <a href="https://www.baidu.com/duty/" target="_blank" class="f1">使用百度前必读</a>
        <a href="https://help.baidu.com/" target="_blank" class="f1">帮助中心</a>
        <a href="https://e.baidu.com/?refer=1271" target="_blank" class="f1">企业推广</a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank" class="f1"> 京公网安备11000002000001号</a>
        <a href="https://beian.miit.gov.cn/" target="_blank" class="f1">京ICP证030173号</a>
        <!-- <a class="f1"> ©2022 Baidu</a>
        <a class="f1"> 互联网药品信息服务资格证书 (京)-经营性-2017-0020</a>
        <a href="https://www.baidu.com/licence/" target="_blank" class="f1">信息网络传播视听节目许可证0110516</a> -->
        <a href="#" class="f1">互联网宗教信息服务许可证编号：京（2022）0000043</a>
        <!-- 适老化无障碍服务图片 -->
        <a><img class="f2" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/footer/aria-3006e33cce.png"></a>
    </div>>
    <div class="G">
        <!-- 暂时不知道有什么含义 -->
        <!-- 定义边角二维码 -->
        <div class="g3">
            <div class="g4">
                <img class="g5" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/qrcode/qrcode@2x-daf987ad02.png">
            </div>
        </div>
    </div>
</body>
</html>